<template>
  <div class="main">
    <div class="plan-base flex-between">
      <div class="info card">
        <div class="info-title flex flex-align-items-center">
          <p class="font-18-B ellipsis-1" :title="info.name">{{ info.name }}</p>
          <span class="font-14" :class="{ ing: info.status === 1, pause: info.status === 2 }">
            {{ info.status === 1 ? '进行中' : '已暂停' }}</span>
        </div>
        <p class="info-time font-14">创建日期：{{ info.time }}</p>
        <p class="info-desc font-14 ellipsis-1" :title="info.desc">{{ info.desc }}</p>
      </div>

      <div class="blog card flex-between flex-column">
        <p class="blog-title font-14">红人数量</p>
        <div class="blog-num flex-between flex-align-items-center">
          <div class="blog-num-left flex font-12">
            <p class="font-22-B">{{ info.sensation }}</p>/已合作<span class="font-12">{{ info.cooperate }}</span>红人
          </div>
          <el-tooltip content="添加红人" placement="top" effect="light">
            <p class="blog-num-right flex-center flex-align-items-center pointer" @click="addSensationShow = true">
              <i class="iconfont icon-jiahao"></i>
            </p>
          </el-tooltip>
        </div>
      </div>

      <div class="account card flex-between flex-column">
        <p class="account-title font-14">红人数量</p>
        <div v-if="info.collaborator.length > 0" class="collaborator flex">
          <p>
            <img src="@/assets/collaborator-1.png">
          </p>
          <p>
            <img src="@/assets/collaborator-2.png">
          </p>
          <p>
            <img src="@/assets/collaborator-3.png">
          </p>
          <p>
            <img src="@/assets/collaborator-4.png">
          </p>
          <el-tooltip content="添加协助者" placement="top" effect="light">
            <img src="@/assets/more.png" class="pointer" @click="addCollaboratorShow = true">
          </el-tooltip>
        </div>
        <div v-else class="no-collaborator flex-between flex-align-items-center">
          <span class="no-collaborator-left font-12">暂无协助者</span>
          <el-tooltip content="添加协助者" placement="top" effect="light">
            <p class="no-collaborator-right flex-center flex-align-items-center pointer"
              @click="addCollaboratorShow = true">
              <i class="iconfont icon-jiahao"></i>
            </p>
          </el-tooltip>
        </div>
      </div>
    </div>

    <el-tabs v-model="tabCheck">
      <el-tab-pane label="合作管理" name="合作管理">
        <cooperative-Manage></cooperative-Manage>
      </el-tab-pane>
      <el-tab-pane label="效果监控" name="效果监控">
        <effect-monitoring :tabCheck="tabCheck"></effect-monitoring>
      </el-tab-pane>
    </el-tabs>
  </div>

  <add-collaborator v-if="addCollaboratorShow" :list="info.collaborator" @change="collaboratorChange"
    @close="addCollaboratorShow = false"></add-collaborator>
  <add-sensation v-if="addSensationShow" @change="sensationChange" @colse="addSensationShow = false"></add-sensation>
</template>

<script setup>
import CooperativeManage from './components/cooperativeManage.vue';
import EffectMonitoring from './components/effectMonitoring.vue';
import AddCollaborator from './components/addCollaborator.vue';
import AddSensation from './components/addSensation.vue';
import { ref } from 'vue';

const info = ref({
  name: '测试1',
  status: 1,
  time: '2024-01-04 09:24:47',
  desc: '1321231231',
  sensation: 1,
  cooperate: 0,
  collaborator: []
});
const tabCheck = ref('合作管理');
const addCollaboratorShow = ref(false);
const addSensationShow = ref(false);

const collaboratorChange = e => {
  info.value.collaborator = e;
}
const sensationChange = () => {
  addSensationShow.value = false;
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px 24px;

  &::v-deep {
    .el-tabs__header {
      padding-left: 22px;
    }

    .el-tabs__item {
      &:not(.is-active) {
        color: #666;

        &:hover {
          color: #666;
        }
      }

      &.is-active {
        color: #333;
        font-weight: bold;
      }
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      height: 4px;
      background: @main-color;
    }
  }
}

.card {
  height: 130px;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
}

.plan-base {
  margin-bottom: 20px;

  .info {
    flex: 1;
    min-width: 660px;
    margin-right: 16px;
    padding-left: 32px;

    .info-title {
      p {
        color: #333;
      }

      span {
        width: 70px;
        height: 24px;
        text-align: center;
        border-radius: 6px;
        line-height: 24px;
        margin-left: 8px;

        &.ing {
          background-color: rgb(241, 251, 247);
          color: rgb(115, 222, 179);
        }

        &.pause {
          background-color: rgb(244, 244, 244);
          color: rgb(154, 154, 154);
        }
      }
    }

    .info-time {
      color: #333;
      margin-top: 10px;
    }

    .info-desc {
      color: #333;
      margin-top: 4px;
    }
  }

  .blog {
    margin-right: 16px;
    width: 286px;

    .blog-title {
      color: #333;
    }

    .blog-num {
      .blog-num-left {
        align-items: end;
        color: #999;

        p {
          color: #333;
        }

        span {
          color: @main-color;
        }
      }

      .blog-num-right {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffedf1;
        color: @main-color;

        &:hover {
          background: @main-color;

          i {
            color: #fff;
          }
        }

        i {
          color: @main-color;
        }
      }
    }
  }

  .account {
    width: 210px;

    .account-title {
      color: #333;
    }

    .collaborator {
      p {
        width: 30px;
      }

      img {
        width: 40px;
        height: 40px;
      }
    }

    .no-collaborator {
      span {
        color: #666;
      }

      p {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffedf1;
        color: @main-color;

        &:hover {
          background: @main-color;

          i {
            color: #fff;
          }
        }

        i {
          color: @main-color;
        }
      }
    }
  }
}
</style>
